import 'package:flutter/material.dart';
import 'package:vdrag_saas/model/item_model.dart';

// 商品卡片
class ItemContentColumn extends StatelessWidget {
  final ItemModel item;
  final defaultCoverImage = Image.asset('assets/images/defaultWeb.png', height: 165, fit: BoxFit.cover);

  ItemContentColumn({
    super.key,
    required this.item,
  });

  @override
  Widget build(BuildContext context) {
    // Stack 可以容纳多个组件，以叠加的方式摆放子组件，后者居上。拥有Alignment属性，
    // 可以与Positioned组件联合使用，精准并有效摆放。同Android端FramLayout布局相似。
    return Container(
      constraints: const BoxConstraints(maxWidth: 294, maxHeight: 256, minHeight: 256, minWidth: 294),
      color: const Color(0xfff9f9f9),
      child: Column(
        children: [
          item.coverImage.isNotEmpty ? Image.network(item.coverImage, height: 165, width: 294, fit: BoxFit.fill) : defaultCoverImage,
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [              
              // 名称
              SelectableText(
                item.itemName ?? "",
                style: const TextStyle(
                  fontSize: 14,
                  color: Color.fromARGB(255, 102, 102, 102),
                ),
              ),
              // 浏览与点赞
              Row(
                children: [
                  Row(
                    children: [
                      const Icon(
                        Icons.remove_red_eye_outlined,
                        color: Color.fromARGB(255, 187, 187, 187),
                        size: 12,
                      ),
                      const Padding(padding: EdgeInsetsDirectional.only(end: 4)),
                      Text(
                        '${item.browseRecord ?? 0}',
                        style: const TextStyle(
                          fontSize: 12,
                          color: Color.fromARGB(255, 187, 187, 187),
                        ),
                      ),
                      const SizedBox(width: 20,),
                      const Icon(
                        Icons.thumb_up_off_alt,
                        color: Color.fromARGB(255, 187, 187, 187),
                        size: 12,
                      ),
                      const Padding(padding: EdgeInsetsDirectional.only(end: 4)),
                      Text(
                        '${item.likeRecord ?? 0}',
                        style: const TextStyle(
                          fontSize: 12,
                          color: Color.fromARGB(255, 187, 187, 187),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              // 标签
              SizedBox(
                height: 22,
                width: 294,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: item.labelArr.length,
                  itemBuilder: (context, index) => _buildItem(item.labelArr[index]),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildItem(String label) => Container(
        alignment: Alignment.center,
        height: 22,
        padding: const EdgeInsets.only(left: 10, right: 10),
        margin: const EdgeInsets.only(right: 10),
        decoration: BoxDecoration(
          border: Border.all(
            width: 1,
            color: const Color.fromARGB(255, 179, 216, 255),
          ),
          borderRadius: BorderRadius.circular(0),
          color: const Color.fromARGB(255, 236, 245, 255),
        ),
        child: Text(label, style: const TextStyle(color: Color.fromARGB(255, 107, 179, 255), fontSize: 12)),
      );
}
